<template>
    <form @submit.prevent="saveUserInfo">
        <label for="username">用户名</label>
        <input type="text" v-model="user.username" id="username" placeholder="请输入用户名" />

        <label for="gender">性别</label>
        <select v-model="user.gender" id="gender">
            <option v-for="(option, index) in genderOptions" :key="index" :value="option.value">
                {{ option.label }}
            </option>
        </select>

        <label for="grade">年级</label>
        <select v-model="user.grade" id="grade">
            <option v-for="(option, index) in gradeOptions" :key="index" :value="option.value">
                {{ option.label }}
            </option>
        </select>

        <label for="phone">电话</label>
        <input type="tel" v-model="user.phone" id="phone" placeholder="请输入电话" />

        <label for="email">邮箱</label>
        <input type="email" v-model="user.email" id="email" placeholder="请输入邮箱" />

        <button type="submit">保存</button>
    </form>
</template>

<script>
export default {
    name: 'UserInfo',
    data() {
        return {
            user: {
                username: '',
                gender: '',
                grade: '',
                phone: '',
                email: ''
            },
            genderOptions: [
                { value: 'male', label: '男' },
                { value: 'female', label: '女' }
            ],
            gradeOptions: [
                { value: '1', label: '一年级' },
                { value: '2', label: '二年级' },
                { value: '3', label: '三年级' },
                { value: '4', label: '四年级' },
                { value: '5', label: '五年级' },
                { value: '6', label: '六年级' }
            ]
        };
    },
    created() {
        const userInfo = JSON.parse(localStorage.getItem('userInfo'));
        if (userInfo) {
            this.user = userInfo;
        }
    },
    methods: {
        saveUserInfo() {
            console.log('保存用户信息:', this.user);

            setTimeout(() => {
                localStorage.setItem('userInfo', JSON.stringify(this.user));
                alert('用户信息已保存');
            }, 1000);
        }
    }
};
</script>

<style scoped>
form {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 400px;
    margin: auto;
}

form label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

form input,
form select {
    width: 100%;
    padding: 10px;
    margin-bottom: 16px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

form button {
    width: 100%;
    padding: 10px;
    background-color: #358d73;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

form button:hover {
    background-color: #42b983;
}
</style>